import React from 'react';
import { subscribe } from 'horizon-react';
import { deleteDoc } from 'horizon-react/lib/utils';

import styles from './styles';


const mapDataToProps = {
  todos: (hz, props) => hz('todos').limit(props.limit)
};

const DropdownMenu = (props) => (
  <div className={styles.dropWarp}>
    <ul className={styles.listDrop} >
      {props.todos.map(
        todo => (
          <li className={styles.itemDrop} key={todo.id}>
            <span className={styles.caption}>{todo.text || '-'}</span>
            <span className={styles.actions}>
              <i
                 className="fa fa-remove"
                 onClick={() => {
                   deleteDoc(props.horizon('todos'), { id: todo.id });
                }}
                />
            </span>
          </li>
        )
      )}
  </ul>
    </div>
);

export default subscribe({
  mapDataToProps
})(DropdownMenu);


